﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored="false"%>

<c:set var="TIME" value="${time}" />

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/core.css" />
		<title>Hong Kong Traffic Monitor</title>
		<script src="/js/jquery-1.4.2.min.js" language="javascript"></script>
		<script>
			function changeSize(w,h,s) {
				$('td img').each(function() {
					$(this).css('width', w);
					$(this).css('height', h);
				});
				$('td[class=cell]').each(function() {
					$(this).css('font-size', s);
				});
			}
		</script>
	</head>
	
	<body>
		<h1>The all-in-one Hong Kong Traffic Monitor</h1>
		View images in <a href="#" onclick="changeSize('320','240','16px');">large</a>, <a href="#" onclick="changeSize('240','180','12px');">medium</a>, <a href="#" onclick="changeSize('120','90','10px');">small</a> size (<a href="?view=map">map</a>)
		<p />
		<table>
			<c:forEach items="${locations}" var="MAP">
				<tr>
				<c:forEach items="${MAP.value}" var="LINFO" varStatus="status">
					<td class="cell"><img class="small" src="${LINFO.imgPath}${TIME}"></img><br/>${LINFO.areaName} - ${LINFO.dotName}</td>
				</c:forEach>
				</tr>
			</c:forEach>
		</table>
		<p />
		<img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
	</body>
</html>
